<!-- 面包屑导航 -->
<template>
  <div class="bread_wrap">
    <el-breadcrumb separator="/">
        <el-breadcrumb-item >
          <i @click="toSend" :class="colFlag?'el-icon-s-fold':'el-icon-s-unfold'"></i>
        </el-breadcrumb-item>
        <el-breadcrumb-item >首页</el-breadcrumb-item>
        <el-breadcrumb-item v-for="item in breadArr" :key="item.name">{{item.title}}</el-breadcrumb-item>

    </el-breadcrumb>
  </div>
</template>

<script>
import {mapMutations,mapState} from 'vuex'

export default {
  name: 'Vuepro2209BreadCom',
  props:{
 
  },
  data() {
    return {
      colFlag:false, //控制菜单折叠图标
    };
  },
  computed:{
    ...mapState(['breadArr']) //注入vuex中的面包屑导航数据
  },
  mounted() {
    
  },

  methods: {
    ...mapMutations(['setCol']),//将vuex的mutations注入本组件的methods
    toSend(){ //去控制菜单 折叠
      this.colFlag=! this.colFlag;
        // 兄弟组件传值eventBus
      this.$bus.$emit("tocollapse",this.colFlag)
      // 
      if(this.colFlag){
          this.setCol({menuCol:1,viewCol:23})
      }else{
           this.setCol({menuCol:4,viewCol:20})
      }
     
    
    }
  },
};
</script>
<style lang="less" scoped>
    .bread_wrap{
      margin:20px;
      color: white
    }
   /deep/ .el-breadcrumb__inner{
      color: white;
    }
   
</style>